<template>
    <div class="rights">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" >
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- card列表 -->
        <el-card>
            <el-button type="primary" class="addRoles">添加角色</el-button>
            <el-table
                :data="rolesData"
                border
                style="width: 100%">
                <!-- 展开部分 -->
                <el-table-column  type="expand">
                    <template slot-scope="scope">
                        <el-row 
                            :class="['border-bottom',ind1===0?'border-top':'']"
                            v-for="(item1,ind1) in scope.row.children"
                            type="flex"
                            align="middle">
                            <!-- 一级权限 -->
                            <el-col :span="5">
                                <el-tag closable  @close="handleClose(scope.row,item1.id)">{{item1.authName}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <!-- 二级权限和三级权限 -->
                            <el-col :span="19">
                                <!-- 二级权限 -->
                                <el-row 
                                    :class="[ind2===0?'':'border-top']"  
                                    v-for="(item2,ind2) in item1.children"
                                    type="flex"
                                    align="middle">
                                    <el-col :span="6">
                                        <el-tag type="success" @close="handleClose(scope.row,item2.id)" closable>{{item2.authName}}</el-tag>
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <el-tag type="success"  @close="handleClose(scope.row,item3.id)" v-for="item3 in item2.children" closable>
                                            {{item3.authName}}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>    
                </el-table-column>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作" prop="edit">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" mini>编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" mini>删除</el-button>
                        <el-button size="mini" type="success" icon="el-icon-s-tools" mini @click="getRightTreeData(scope.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>



        <el-dialog
            title="分配权限"
            :visible.sync="rolesVisible"
            width="50%"
            @close="closeSingleRoleDialog"
            >
           <el-tree 
            :data="rightsData" 
            :props="rightsProps"
            show-checkbox
            default-expand-all
            :default-checked-keys="keylist"
            node-key="id" 
            ref="tree"
            ></el-tree>
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rolesVisible = false">取 消</el-button>
                <el-button type="primary" @click="allotRights">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            rolesData:[],
            rolesVisible:false,//控制分配权限的dialog显示与隐藏
            keylist:[],//获取所选的数据id
            roleId:"",
            rightsData:[],//整体的分配权限的数据
            rightsProps: {
                children: 'children',
                label: 'authName'
            }
        }
    },
    created(){
        this.getRolesData()
        // this.getRightTreeData()
    },
    methods:{
       async getRolesData(){
           let {data:res} = await this.$axios.get("http://timemeetyou.com:8889/api/private/v1/roles")
            if(res.meta.status === 200){
                this.$message.success("获取角色列表数据成功！")
            }
            this.rolesData = res.data;
        },
        async handleClose(role,rightId){
            let result =await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).catch(err=> err);
            if(result === 'confirm'){
                let {data:res} = await this.$axios.delete(`http://timemeetyou.com:8889/api/private/v1/roles/${role.id}/rights/${rightId}`)
                if(res.meta.status === 200){
                    this.$message.success("删除权限成功！")
                }
                //这样做会导致页面重新渲染则不可取
                //this.getRolesData()
                //返回的data, 是当前角色下最新的权限数据
                role.children = res.data;
            }
            else if(result === "cancel"){
                this.$message("已取消删除！")
            }
        },
        async getRightTreeData(role){
            let {data:res} = await this.$axios.get("http://timemeetyou.com:8889/api/private/v1/rights/tree")
            if(res.meta.status===200){
                this.$message.success("获取权限数据成功！")
            } 
            this.rightsData = res.data;
            this.rolesVisible = true
            this.roleId = role.id;
            //传递角色以及数组
            this.getLeafKey(role,this.keylist)
        },
        //获取每一个角色的三级权限并存储到keylist数组当中
        async getLeafKey(node,arr){
            //利用递归的方式获取三级权限的id
            if(!node.children){
               return arr.push(node.id)
            }
            node.children.forEach(item => {
                this.getLeafKey(item,arr)
            });

            
        },
        //关闭single清空数据
        closeSingleRoleDialog(){
            this.keylist = []
        },
        //分配权限
        async allotRights(){
            let key = [
                ...this.$refs.tree.getCheckedKeys(),
                ...this.$refs.tree.getHalfCheckedKeys(),
            ]
            let newKey = key.join(",");
            console.log(newKey)
            let {data:res} = await this.$axios.post(`http://timemeetyou.com:8889/api/private/v1/roles/${this.roleId}/rights`,
            {rids:newKey})
            if(res.meta.status === 200){
                this.$message.success("更新数据成功！")
            }
            this.rolesVisible = false;
        }
    }
};
</script>
<style lang="less" scoped>
    .el-breadcrumb{
        margin-bottom: 15px;
    }
    .addRoles{
        margin-bottom: 15px;
    }
    .border-bottom{
        border-bottom: 1px solid #eee;
    }
    .border-top{
        border-top: 1px solid #eee;
    }
    .el-tag{
        margin: 7px;
    }
</style>